<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
Copyright (c) 2014 Mozilla Corporation
-->

<template name="alertssummary">
<div class="container">
    <div class="row col-xs-10">
        <div class="col-xs-2"><button class="btn btn-default btn-xs" data-toggle="collapse" data-target="#alertSearch">advanced search</button></div>
        <div class="col-xs-9">
            <div id='alertSearch' class="collapse">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-xs-2" for="alertssearchtext">Summary</label>
                        <div class="col-xs-8">
                            <input type="search" name="searchSummary" class="form-control search-query" id="alertssearchtext" placeholder="summary field regex search">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-2" for="searchTime">Time Period</label>
                        <div class="col-xs-8">
                            <select id="searchTime" name="searchTime" class="form-control" title="Time Period">
                                <option value='1 hours'>Last Hour</option>
                                <option value='2 hours'>Last 2 Hours</option>
                                <option value='6 hours'>Last 6 hours</option>
                                <option value='1 days'>Last day</option>
                                <option value='2 days'>Last 2 days</option>
                                <option value='7 days'>Last 7 days</option>
                                <option value='30 days'>Last 30 days</option>
                                <option value='all'>All</option>
                            </select>
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-xs-8 col-xs-offset-2">
                            <button class="btn btn-default btn-xs alertssearch">search</button>
                        </div>

                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div id="charts" class="row col-xs-12">
            <div id="ringChart-category" class="col-xs-3 text-center"><h5 class="upperwhite" id="Categories">Categories: <span class="filter"></span></h5></div>
            <div id="volumeChart" class="col-xs-6 text-center"><h5 class="upperwhite">Volume <span class="filter"></span></h5></div>
            <div id="ringChart-severity" class="col-xs-3 text-center"><h5 class="upperwhite" id="Severity">Severity: <span class="filter"></span></h5></div>
    </div>
    <div class="row col-xs-10">
        <div class="col-xs-4 time-period">
            <span id="displayTimePeriod"><h5 class="upperwhite">Time Period: {{currentTimePeriod}}</h5></span>
        </div>
    </div>
    <div class="row col-xs-10">
        <div class="col-xs-1"><button class="btn btn-default btn-xs reset">reset filters</button></div>
        <div class="col-xs-4 record-count">
            <span id="displayCount"></span>{{displayedAlerts}} displayed/total: <span id="totalAlerts">{{totalAlerts}}</span>
        </div>
        <div class="col-xs-5"><input type="search" class="form-control"  id="alertsfiltertext" placeholder="summary field regex filter"></div>
    </div>
    <div class="row col-xs-12">
        <div id="alerts-data-table" >
            <table class="alerts-data-table table table-reactive table-condensed">
                <thead><tr>
                <td class="upperwhite">Timestamp</td>
                <td class="upperwhite">Links</td>
                <td class="upperwhite">Severity</td>
                <td class="upperwhite">Status</td>
                <td class="upperwhite">Category</td>
                <td class="upperwhite">Summary</td>
                <td></td>
                </tr>
                </thead>
                <tbody>
                    {{#each documents}}
                        {{>alertTableItem}}
                    {{/each}}
                </tbody>
            </table>
            {{> defaultBootstrapPaginator pagination=templatePagination limit=5 containerClass="text-center"}}
        </div>
    </div>
</div>
</template>

<template name="alertTableItem">
    <tr class="alert-row">
        <td>{{utctimestamp}}</td>
        <td><a href="/alert/{{esmetadata.id}}">mozdef</a><br>
            <a href="{{ resolveKibanaURL mozdef.kibanaURL }}#/doc/alerts-*/{{esmetadata.index}}/_doc?id={{esmetadata.id}}" target="_blank">kibana</a>
            {{#if url}}
                <br><a href="{{url}}" target ="_blank">docs</a>
            {{/if}}
        </td>
        <td class="alert alert-{{severity}}">{{severity}}</td>
        <td>
            {{#if status}}
            {{status}}
            {{else}}
                Manual
            {{/if}}
        </td>
        <td>{{category}}</td>
        <td>{{{ipDecorate summary}}}</td>
        <td>
            {{#if acknowledged}}
                <span class="tooltip-wrapper" title="Ack by: {{acknowledgedby}}" data-toggle="tooltip">
                    <button class="btn btn-xs btn-warning btnAlertAcked"  data-target="{{_id}}">acked</button>
                </span>
            {{else}}
                <button class="btn btn-xs btn-warning btnAlertAck" data-target="{{_id}}">ack</button>
            {{/if}}
        </td>
    </tr>
</template>
